<template>
  <el-container class="list">
    <el-aside width="180px">
      <ul class="menu" v-if="type===0">
        <li :index="item.id"
            :key="item.id"
            v-for="item in projectList"
            :class="{'is-active':item.id===activeProject.id}"
            @click="handleSelect(item)">
          <i class="el-icon-s-order"></i>
          {{item.name}}
        </li>
      </ul>
      <avue-tree v-else :permission="projectPermission" :option="projectOption" :data="projectList"
                  @node-click="handleSelect"
                 @save="handleAddProject"
                 @update="handleUpdateProject"
                  @del="handleDelProject"
                  class="custom-tree">
        <span class="el-tree-node__label" slot-scope="{node,data}" >
          <span> {{ node.label }}</span>
          <i class="el-icon-s-custom blue" title="所有者" v-if="data.isOwner"></i>
          <i class="el-icon-share blue" title="公开项目" v-if="data.isPublic"></i>
        </span>
      </avue-tree>
    </el-aside>
    <el-container>
      <el-tabs class="project-config" v-model="activeProjectTab" @tab-click="handleChange">
        <el-tab-pane label="大屏管理" name="visual">
          <visual :project-id="activeProject.id" :project="activeProject"></visual>
        </el-tab-pane>
        <el-tab-pane label="项目组成员" name="members" v-if="activeProject.isOwner">
          <member :project-id="activeProject.id"></member>
        </el-tab-pane>
        <el-tab-pane label="数据源管理" name="db" v-if="activeProject.isOwner">
          <project-db :project-id="activeProject.id"></project-db>
        </el-tab-pane>
      </el-tabs>
    </el-container>
  </el-container>
</template>

<script>
import {addProject, deleteProject, projectList, updateProject} from "@/api/project";
import {delObj} from "@/api/visual";
import Member from "@/page/list/project/member";
import ProjectDb from "@/page/list/project/project-db";
import Visual from "@/page/list/project/visual";

export default {
  components: {Visual, ProjectDb, Member},
  data () {
    return {
      type: 1,
      projectOption:{
        filterText:"项目名称",
        addBtn: true,
        formOption:{
          labelWidth:180,
          column:[
            {label:"项目名称",prop: 'name',
              rules:[
                {required: true,message: '请输入项目名称',trigger: 'blur'}
              ]},
            {label:"项目简介",prop: 'description'},
            {label:"是否公开",
              prop: 'isPublic',
              type: 'select',
              dicData: [{
                label: '不公开',
                value: false
              }, {
                label: '公开',
                value: true
              }],
              rules:[
                {required: true,message: '请选择是否公开',trigger: 'blur'}
              ]
            }
          ]
        },
        props:{
          labelText: '项目',
          label:'name',
          value:'id',
          children: 'children'
        }
      },
      projectList:[],
      activeProject: {},
      activeProjectTab: 'visual',
    }
  },
  mounted() {
    this.getProjectList()
  },
  methods: {
    projectPermission(key,data){
      if(key==='editBtn' && (data.isOwner||data.projectRole ===1)){
        return true
      }
      if(key === 'delBtn' && data.isOwner){
        return true
      }
      return false
    },
    handleSelect: function (project){
      this.activeProject =project
    },
    getProjectList: function (){
      projectList().then(res =>{
         this.projectList =res.data.data;
         if(this.projectList&& !this.activeProject){
           this.activeProject = this.projectList[0]
         }
      })
    },
    handleChange: function (tab,event){
      this.activeProjectTab = tab.name
      // 获取数据逻辑
    },
    handleAddProject(node,data,done,loading){
      addProject(data).then(res =>{
        done()
        this.getProjectList()
      })
    },
    handleUpdateProject(node,data,done,loading){
      updateProject(data.id,data).then(res =>{
        done()
        this.getProjectList()
      })
    },
    handleDelProject(item,done){
      this.$confirm('是否确认永久删除项目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteProject(item.id).then(() => {
          done()
          this.getProjectList()
        })
      }).catch(() => {

      });
    }
  }
};
</script>

<style lang="scss">
.project-config{
  width: 100%;
}
</style>
